import React, { useEffect } from 'react';
import { Provider } from 'react-redux';
import { UseRequestProvider } from 'ahooks';
import { Helmet } from 'react-helmet';
import { BrowserRouter } from 'react-router-dom';
import { useAppChannelReport } from '@/common/hooks';
import store from './store';
import Router from './router';

const AppMain = () => {
  const [, setChannelUrlHandle] = useAppChannelReport();

  // 全局请求配置
  const GlobalRequestOptions = {
    formatResult: (res) => res?.data,
    defaultLoading: true,
    throwOnError: true,
  };

  useEffect(() => {
    setChannelUrlHandle();
  }, []);

  return (
    <UseRequestProvider value={GlobalRequestOptions}>
      <BrowserRouter>
        <Router />
      </BrowserRouter>
    </UseRequestProvider>
  );
};

const App = () => (
  <Provider store={store}>
    <Helmet
      title={process.env.TITLE}
      meta={[{
        name: 'keywords',
        content: process.env.KEYWORDS,
      }, {
        name: 'description',
        content: process.env.DESCRIPTION,
      }]}
    />
    <AppMain />
  </Provider>
);

export default App;
